<!DOCTYPE html>
<html>
	<head>
		<title>私密群聊</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-title" content="私密群聊">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<link rel="apple-touch-icon" href="/images/icon.png">
		<link rel="apple-touch-startup-image" href="/images/startup.png">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1468819778_393766.css">
		<link rel="stylesheet" type="text/css" href="/css/index.css">
	</head>
	<body>
	<div id="login" class="ani">
		<input type="text" id="name" placeholder="请设置一个昵称" maxlength="10">
		<input type="button" id="joinbtn" value="加入聊天">
	</div>
	<div id="content" class="ani blur">
		<div id="iscroll">
			<div id="msgContent"></div>
		</div>
		<div id="operate">
			<div id="inputbox">
				<input type="text" id="msg" placeholder="换行键发送消息" maxlength="100">
				<i class="btn iconfont icon-addface" id="addface"></i>
				<i class="btn iconfont icon-addimg" id="pluginbtn"></i>
			</div>
			<div id="facebox"></div>
			<div id="pluginbox">
				<div class="plugin"><i class="iconfont icon-image" id="addimg"><input type="file" accept="image/png,image/jpeg"></i>图片</div>
				<div class="plugin"><i class="iconfont icon-music" id="musicbtn"></i>音乐</div>
				<div class="plugin"><i class="iconfont icon-location" id="location"></i>位置</div>
			</div>
		</div>
	</div>
	<script type="text/tmpl" id="tmpl">
		{{#if(d.type=='notify'){}}
			<div class="item notify"><span>{{d.msg}}</span></div>
		{{#}else{}}
			<div class="item {{d.uid==storage.uid&&'self'}}">
				<div class="face"><img src="{{'data:image/png;base64,'+ new Identicon(hex_sha1(d.name),identiconOpt).toString()}}"/></div>
				<div class="msg">
					<div class="name">{{d.name}} {{d.time}}</div>
					{{#if(d.type=='img'){}}
						<div class="body"><img src="data:image/jpeg;base64,{{d.msg}}" class="imgmsg"></div>
					{{#}else if(d.type=='location'){}}
						<div class="body"><img src="http://api.map.baidu.com/staticimage/v2?ak=5ad20b207f849311812ca7946f9feb1f&center={{d.msg}}&markers={{d.msg}}&zoom=15&copyright=1" class="imgmsg"></div>
					{{#}else if(d.type=='music'){}}
						<div class="body music" data-music="{{d.url}}"><div class="sound"></div> {{d.msg}}</div>
					{{#}else{}}
						<div class="body">{{resolveMsg(d.msg)}}</div>
					{{#}}}
				</div>
			</div>
		{{#}}}
	</script>
	<script type="text/tmpl" id="tmpl-face">
		{{#for(var i=(d-1)*19;i<d*19;i++){}}
			{{#if(i<95){}}
			<img class="face" src="/images/face/{{i}}.png" data-i="{{i}}"/>
			{{#}}}
		{{#}}}
		<i class="face iconfont icon-enter"></i>
		<div class="dots">
		{{#for(var i=1;i<=5;i++){}}
			<span class="dot {{i==d&&'current'}}"></span>
		{{#}}}
		</div>
	</script>
	<div id="musicbox" class="ani">
		<a href="javascript:void(0)" id="close-musicbox-btn">&times;</a>
		<input type="text" id="musicname" placeholder="输入歌名搜索歌曲"/>
	</div>
	</body>
		<script type="text/javascript" src="/js/zepto.min.js"></script>
		<script type="text/javascript" src="/js/laytpl.js"></script>
		<script type="text/javascript" src="/js/sha1.js"></script>
		<script type="text/javascript" src="/js/identicon.js"></script>
 		<script type="text/javascript" src="/js/iscroll.js"></script>
		<script type="text/javascript" src="/js/tool.js"></script>
		<script type="text/javascript" src="/js/index.js"></script>
</html>